<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>账号管理-管理系统</title>
        <meta name="keywords" content="管理系统">
        <meta name="description" content="管理系统">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="{$sys_url.static}layui/css/layui.css" media="all">
        <script src="{$sys_url.static}layui/layui.js" charset="utf-8"></script>
        <script src="{$sys_url.static}layui/date.js" charset="utf-8"></script>
    </head>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
            padding: 0 15px;
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            box-sizing: border-box;
        }
    </style>
    <body>
        <div>
            <form class="layui-form">
                <div class="layui-form-item layui-elem-quote">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-inline">
                        <select id="atype" name="type" lay-verify="">
                            <option value="all">全部</option>
                            <option value="100">游客</option>
                            <option value="1">QQ</option>
                            <option value="2">微信</option>
                            <option value="4">手机号</option>
                            <option value="3">系统添加</option>
                            <option value="5">AppleID</option>
                        </select>
                    </div>
                    <label class="layui-form-label">用户ID</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userid" id="userid" autocomplete="off" placeholder="请输入ID" class="layui-input">
                    </div>
                    <label class="layui-form-label">昵称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" id="name" autocomplete="off" placeholder="请输入昵称" class="layui-input">
                    </div>

                    <button type="button" class="layui-btn btnSearch" lay-filter="search" lay-submit>查询</button>
                </div>
            </form>
            <table class="layui-hide" id="tableList" lay-filter="demo">


            </table>
        </div>
    </body>
    <script type="text/html" id="type">

        <label>{{ d.type == 0 ? '游客' : d.type == 1 ? 'QQ' : d.type == 2 ? '微信': d.type == 3 ? '系统添加':d.type == 4?'手机号注册':'苹果' }}</label>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="lock">强制下线</a>
    </script>
    <script type="text/html" id="add_time">
        {{ dateFormat(d.add_time) }}
    </script>
    <script type="text/html" id="expiration_time">
        {{ dateFormat(d.expiration_time) }}
    </script>
    <script type="text/html" id="active_time">
        {{ dateFormat(d.active_time) }}
    </script>
    <script>
        layui.use(['table','util'], function() {
            var table = layui.table;
            var $ = layui.jquery;
            var form = layui.form;
            var util = layui.util;
            //加载表格
            table.render({
                elem: '#tableList'
                , url: '{$sys_url.ctr}/getList'
                , cellMinWidth: 80
                        //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                        {field: 'mid', width: '9%', title: '用户ID', sort: true, align: 'center'},
                        {field: 'type',width: '9%', title: '类型', align: 'center',templet: "#type"},
                        {field: 'name',width: '9%', title: '昵称', align: 'center'},
                        {field: 'head_url',width: '9%', title: '头像', align: 'center',templet:'<div><img src="{{d.head_url}}"  width="30px" height="20px" class="layui-upload-img" onclick="previewImg(this)"></div>'},
                        {field: 'login_key',width: '9%', title: 'token', align: 'center'},
                        {field: 'ip',width: '15%', title: '登录IP', align: 'center'},
                        {field: 'address',width: '9%', title: '地理位置', align: 'center'},
                        {field: 'add_time', width: '10%',title: '登录时间', align: 'center',templet: "#add_time"},
                        {field: 'active_time', width: '10%',title: '最后活跃时间', align: 'center',templet: "#active_time"},
                        {fixed: 'right',width: '10%', title: '操作', align: 'center', toolbar: '#barDemo'}
                    ]],
                page: true,
                limit:20,
                request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    , limitName: 'pageNum' //每页数据量的参数名，默认：limit
                }
            });
            //重载表格
            $('.btnSearch').on('click', function() {
                table.reload('tableList', {
                    page: {
                        curr: 1
                                //重新从第 1 页开始
                    },
                    where: {
                        key: {
                            name: $('#name').val(),
                            type: $('#atype').val(),
                            userid:$("#userid").val(),


                        }
                    }
                });
            });

            //监听禁用启用操作
            form.on('switch(statusDemo)', function (obj) {
                var id=this.id;
                var status=0;
                var id_seller = $("#id_seller").val();
                console.log(id_seller);
                if(obj.elem.checked){ status=1}
                $.ajax({
                    url: '{$sys_url.ctr}/editStatus',
                    type: 'get',
                    data: {ids: id,status:status,id_seller:id_seller},
                    dataType: "json",
                    beforeSend: function () {

                    },
                    success: function (data) {
                        //do something
                        console.log(data);
                        if (data.code == 1) {
                            var index = parent.layer.getFrameIndex(window.name);
                            //获取当前窗口索引
                            parent.layer.msg('操作成功', {icon: 1});
                            //table.reload('tableList');
                        } else {
                            layer.alert('抱歉，系统繁忙，请稍后再试！', {icon: 2});
                        }
                    },
                    error: function (data) {
                        //do something
                        console.log(data);
                        layer.msg('与服务器连接失败', {icon: 2});
                    }
                });
//        layer.tips(this.value + ' ' + this.name+ '：' + obj.elem.checked, obj.othis);
            });





            //监听工具条
            table.on('tool(demo)', function(obj) {
                var data = obj.data;
                var _this = $(this);
                if (obj.event === 'detail') {
                    layer.open({
                        title: '查看账号',
                        type: 2,
                        shade: false,
                       area: ['800px', '600px'],
                        maxmin: true,
                        btnAlign: 'c',
                        anim: 0,
                        shade: [0.5, 'rgb(0,0,0)'],
                                content: 'userLook.html?id=' + data.id,
                        zIndex: layer.zIndex,
                        //重点1
                        success: function(layero) {
                            //layer.setTop(layero); //顶置窗口
                        },
                        yes: function(index, layero) {
                            //确认按钮
                        }
                    });
                } else if (obj.event === 'del') {
                    layer.confirm('工号：' + data.id + '<br />账号：' + data.account, {icon: 3, title: '是否确定删除?'}, function(index) {
                        if (index >= 1) {
                            $.ajax({
                                url: '{$sys_url.ctr}/del',
                                type: 'get',
                                data: {id: data.id, status: "-1",id_seller:data.id_seller},
                                dataType: "json",
                                beforeSend: function() {
                                    console.log(JSON.stringify(data.field));
                                },
                                success: function(data) {
                                    //do something
                                    console.log(data);
                                    if (data.code == 1) {
                                        var index = parent.layer.getFrameIndex(window.name);
                                        //获取当前窗口索引
                                        parent.layer.msg('删除成功', {icon: 1});
                                        parent.layer.close(index);
                                        table.reload('tableList');
                                        //重新加载父级tabel数据
                                    } else {
                                        layer.alert('抱歉，系统繁忙，请稍后再试！', {icon: 2});
                                    }
                                },
                                error: function(data) {
                                    //do something
                                    console.log(data);
                                    layer.msg('与服务器连接失败', {icon: 2});
                                }
                            });
                            layer.close(index);
                        }
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        title: '编辑',
                        type: 2,
                        shade: false,
                       area: ['800px', '600px'],
                        maxmin: true,
                        btnAlign: 'c',
                        anim: 0,
                        shade: [0.5, 'rgb(0,0,0)'],
                                content: '{$sys_url.ctr}/edit/id/' + data.id,
                        zIndex: layer.zIndex, //重点1
                        success: function(layero) {
                            //layer.setTop(layero); //顶置窗口
                        },
                        yes: function(index, layero) {
                            //确认按钮
                        }
                    });
                } else if (obj.event === 'password') {
                    layer.open({
                        id: 1,
                        type: 1,
                        title: '修改密码',
                        skin: 'layui-layer-rim',
                        area: ['450px', 'auto'],
                        content: '<div class="row div-edit-pwd" style="width: 420px;  margin-left:7px; margin-top:10px;">'
                                + '<div class="col-sm-12">'
                                + '<div class="input-group">'
                                + '<span class="input-group-addon"> 新 密 码   :</span>'
                                + '<input id="firstpwd" name="firstpwd" type="text" class="form-control" placeholder="请输入密码">'
                                + '</div>'
                                + '</div>'
                                + '<div class="col-sm-12" style="margin-top: 10px">'
                                + '<div class="input-group">'
                                + '<span class="input-group-addon">确认密码:</span>'
                                + '<input id="secondpwd" name="secondpwd" type="text" class="form-control" placeholder="请再输入一次密码">'
                                + '</div>'
                                + '</div>'
                                + '</div>'
                        ,
                        btn: ['保存', '取消'],
                        btn1: function(index, layero) {
                            var firstpwd = $('input[name="firstpwd"]').val();
                            var secondpwd = $('input[name="secondpwd"]').val();
                            layer.close(index);
                            if (firstpwd != secondpwd) {
                                layer.alert('两次密码不一致！', {icon: 2});
                                return;
                            }
                            $.ajax({
                                url: '{$sys_url.ctr}/editPwd',
                                type: 'get',
                                data: {id: data.id, pwd: firstpwd,id_seller:data.id_seller},
                                dataType: "json",
                                beforeSend: function() {
                                    console.log(JSON.stringify(data.field));
                                },
                                success: function(data) {
                                    // do something
                                    if (data.code == 1) {
                                        layer.msg('恭喜，密码重置成功！', {icon: 1});
                                    } else {
                                        layer.alert(data.msg, {icon: 2});
                                    }
                                },
                                error: function(data) {
                                    //do something
                                    layer.msg('与服务器连接失败', {icon: 2});
                                }
                            });
                        },
                        btn2: function(index, layero) {
                            layer.close(index);
                        }

                    });
                } else if (obj.event === 'ban') {
                    layer.confirm('ID：' + data.id + '<br />账号：' + data.account, {icon: 3, title: '是否确定禁用?'}, function(index) {
                        $.ajax({
                            url: '{$sys_url.ctr}/editStatus',
                            type: 'get',
                            data: {ids: data.id, status: "0",id_seller:data.id_seller},
                            dataType: "json",
                            beforeSend: function() {
                                console.log(JSON.stringify(data.field));
                            },
                            success: function(data) {
                                //do something
                                console.log(data);
                                if (data.code == 1) {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    //获取当前窗口索引
                                    parent.layer.msg('禁用成功', {icon: 1});
                                    parent.layer.close(index);
                                    table.reload('tableList');

                                    //重新加载父级tabel数据
                                } else {
                                    layer.alert(data.msg, {icon: 2});
                                }
                            },
                            error: function(data) {
                                //do something
                                console.log(data);
                                layer.msg('与服务器连接失败', {icon: 2});
                            }
                        });
                        layer.close(index);

                    });
                } else if (obj.event === 'start-up') {
                    layer.confirm('ID：' + data.id + '<br />账号：' + data.account, {icon: 3, title: '是否确定启用?'}, function(index) {
                        $.ajax({
                            url: '{$sys_url.ctr}/editStatus',
                            type: 'get',
                            data: {ids: data.id, status: "1",id_seller:data.id_seller},
                            dataType: "json",
                            beforeSend: function() {
                                console.log(JSON.stringify(data.field));
                            },
                            success: function(data) {
                                //do something
                                console.log(data);
                                if (data.code == 1) {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    //获取当前窗口索引
                                    parent.layer.msg('启用成功', {icon: 1});
                                    parent.layer.close(index);
                                    table.reload('tableList');
                                    //重新加载父级tabel数据
                                } else {
                                    layer.alert(data.msg, {icon: 2});
                                }
                            },
                            error: function(data) {
                                //do something
                                console.log(data);
                                layer.msg('与服务器连接失败', {icon: 2});
                            }
                        });
                        layer.close(index);



                    });
                } else if (obj.event === 'lock') {
                    layer.confirm('ID：' + data.id + '<br />账号：' + data.name, {icon: 3, title: '是否确定将此会员下线?'}, function(index) {
                        $.ajax({
                            url: '{$sys_url.ctr}/down',
                            type: 'get',
                            data: {id: data.id},
                            dataType: "json",
                            beforeSend: function() {
                                console.log(JSON.stringify(data.field));
                            },
                            success: function(data) {
                                //do something
                                console.log(data);
                                if (data.code == 1) {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    //获取当前窗口索引
                                    parent.layer.msg('成功', {icon: 1});
                                    parent.layer.close(index);
                                    setTimeout(table.reload('tableList'),2000)
                                    //重新加载父级tabel数据
                                } else {
                                    layer.alert(data.msg, {icon: 2});
                                }
                            },
                            error: function(data) {
                                //do something
                                console.log(data);
                                layer.msg('与服务器连接失败', {icon: 2});
                            }
                        });
                        layer.close(index);

                    });
                }
            });
            //新增
            $('.btnAdd').on('click', function() {

                layer.open({
                    title: '新增',
                    type: 2,
                    shade: false,
                    area: ['800px', '600px'],
                    maxmin: true,
                    btnAlign: 'c',
                    anim: 0,
                    shade: [0.5, 'rgb(0,0,0)'],
                            content: '{$sys_url.ctr}/add?id_example='+$("#id_example").val(),
                    zIndex: layer.zIndex,
                    //重点1
                    success: function(layero) {
                        //layer.setTop(layero); //顶置窗口
                    },
                    yes: function(index, layero) {
                        //确认按钮
                    }
                });
            });
        });
        function previewImg(obj) {
            var img = new Image();
            img.src = obj.src;
            var h = img.height+50; // 原图片大小
            var w = img.width; //原图片大小

            var imgHtml = "<img src='" + obj.src + "'  />";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [w + 'px', h + 'px'], // area: [width + 'px',height+'px']  //原图显示
                shadeClose: true,
                scrollbar: false,
                title: "图片预览", //不显示标题
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function() {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        }



    </script>
</html>